<template>
  <main-layout>
    <div class="table-container">
      <el-table 
        :data="tableData" 
        style="width: 100%"
        stripe
        border
        highlight-current-row
        :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
        :row-style="{height: '60px'}"
      >
        <el-table-column prop="username" label="用户名" width="150" align="center">
        </el-table-column>
        <el-table-column prop="corporatename" label="公司名称" width="200" align="center">
        </el-table-column>
        <el-table-column prop="corporateaddress" label="公司地址" width="250" align="center"> </el-table-column>
        <el-table-column prop="headname" label="负责人" width="120" align="center"> </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="150" align="center"> </el-table-column>
        <el-table-column prop="idCard" label="负责人身份证" width="180" align="center"> </el-table-column>
        <el-table-column prop="role" label="角色" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getRoleTagType(row.role)">
              {{ getRoleLabel(row.role) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="区块链地址" align="center"> 
          <template #default="{ row }">
            <el-tooltip effect="light" :content="row.address" placement="top">
              <span class="address-text">{{ truncateAddress(row.address) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </main-layout>
</template>

<script>
import MainLayout from "@/components/Layout.vue";

export default {
  name: "UserHome",
  components: {
    MainLayout,
  },
  data() {
    return {
      options: [
        {
          value: 1,
          label: "生产商",
          tagType: "primary"
        },
        {
          value: 2,
          label: "中间商",
          tagType: "success"
        },
        {
          value: 3,
          label: "销售商",
          tagType: "warning"
        },
        {
          value: 4,
          label: "管理员",
          tagType: "danger"
        },
      ],
      tableData: [
        {
          username: "zhangsan",
          corporatename: "ABC食品有限公司",
          corporateaddress: "北京市朝阳区",
          headname: "张三",
          phone: "13800138000",
          idCard: "110101199001011234",
          role: 1,
          address: "0x1234567890abcdef1234567890abcdef12345678"
        }
      ]
    };
  },
  methods: {
    getRoleLabel(roleValue) {
      const found = this.options.find(item => item.value === roleValue);
      return found ? found.label : '未知角色';
    },
    getRoleTagType(roleValue) {
      const found = this.options.find(item => item.value === roleValue);
      return found ? found.tagType : 'info';
    },
    truncateAddress(address) {
      if (!address) return '';
      return address.length > 10 
        ? `${address.substring(0, 6)}...${address.substring(address.length - 4)}`
        : address;
    }
  },
};
</script>

<style scoped>
.table-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.address-text {
  cursor: pointer;
  color: #409EFF;
  text-decoration: underline;
}

.address-text:hover {
  color: #66b1ff;
}
</style>